﻿
@{
    ViewBag.Title = "我的信息";
    Layout = "~/Views/Shared/_UserLayout.cshtml";
}

@model UserDTO
@section Head{
    <link href="~/common/Threelinkage/layui/css/layui.css" rel="stylesheet" />
}

<!--用户中心-->
<div class="user_style clearfix" id="user">
    <div class="user_title"><em></em>用户中心</div>
    <div class="clearfix user">
        @Html.Partial("~/Views/Shared/_PartialUserLeft.cshtml")
        <div class="right_style r_user_style">
            <div class="user_Borders">
                <div class="title_name">
                    <span class="name">个人信息设置</span>
                </div>
                <div class="about_user_info">
                    <form class="layui-form" method="post">
                        @*<input type="hidden" name="userId" value="@Model.Id" />*@
                        <div class="user_layout">
                            <ul>
                                <li style="margin-bottom:45px">
                                    <img class="layui-upload-img" id="upload_img" src="@(Model.ImgSrc!=null?"http://static.amortal.top/"+Model.ImgSrc+"?imageView2/2/w/200/h/200/interlace/1/q/100":"~/images/people.png")" alt="" width="80px" height="70px" />
                                    <label class="user_title_name">用户头像：</label>
                                    <button type="button" class="layui-btn" id="upload">
                                        上传头像
                                    </button>
                                    <input type="hidden" name="ImgSrc" id="file" />
                                </li>


                                <li><label class="user_title_name">用户昵称：</label><input placeholder="请输入用户名" value="@Model.NiceName" lay-verify="required|username" name="NiceName" type="text" class="add_text" /><i>*</i></li>
                                <li><label class="user_title_name">真实姓名：</label><input name="Name" value="@Model.Name" lay-verify="required|username" type="text" class="add_text" /><i>*</i></li>
                                <li>
                                    <div class="layui-form-item">
                                        <label class="user_title_name">用户性别：</label>
                                        <input type="radio" name="gender" value="1" title="男" id="RadioGroup1_0" checked="checked" />&nbsp;
                                        <input type="radio" name="gender" value="0" title="女" id="RadioGroup1_1" checked="@(!Model.Gender)" />
                                        <i>*</i>
                                    </div>
                                </li>
                                <li><label class="user_title_name">手&nbsp;机&nbsp;号：</label><input value="@Model.PhoneNumber" lay-verify="required|phone" placeholder="请输入手机号" name="PhoneNumber" type="text" class="add_text" /><i>*</i></li>
                                <li><label class="user_title_name">邮箱地址：</label><input name="Email" value="@Model.Email" lay-verify="required|email" placeholder="请输入邮箱地址" type="text" class="add_text" /><i>*</i></li>
                            </ul>
                            <div class="operating_btn"><input lay-filter="edit" lay-submit="" type="button" value="提交" class="submit—btn" /></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@section FooterScript{
    <script src="~/common/Threelinkage/layui/layui.all.js"></script>
    <script type="text/javascript">

        layui.config({
            base: "js/"
        }).use(['form', 'layer', "upload", 'jquery', 'layedit'], function () {
            var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : parent.layer,
                laypage = layui.laypage,
                layedit = layui.layedit,
                upload = layui.upload,
                $ = layui.jquery;


            //执行实例
            var uploadInst = upload.render({
                elem: '#upload' //绑定元素
                , url: '/User/Upload' //上传接口
                , acceptMime: 'image/*'
                , size: 1024 * 2
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#upload_img').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res, index, upload) {

                    if (res.status == "ok") {
                        layer.msg("上传成功", { icon: 1, time: 2000 });
                        $("#file").val(res.data);
                    } else {
                        layer.msg("上传成功失败" + res.errorMsg, { icon: 1, time: 2000 });
                    }
                }
                , error: function () {
                    layer.msg("网络请求失败", { icon: 5, time: 2000 });
                }
            });

            //数据验证
            form.verify({
                username: function (value, item) { //value：表单的值、item：表单的DOM对象

                    if (value.length < 2 || value.length > 10) {
                        return '用户名长度应为2-10个字符';
                    }

                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名不能有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+$/.test(value)) {
                        return '用户名不能全为数字';
                    }
                }
            });


            //此处的addNew是38行代码中提交按钮的 lay-filter属性
            form.on("submit(edit)", function (data) {

                var index = top.layer.msg('数据提交中，请稍候', { icon: 16, time: false, shade: 0.8 });

                var formData = $(".layui-form").serialize();    //表单数据

                $.ajax({
                    url: "/User/UserInfoEdit",
                    type: "POST",
                    dataType: "json",
                    data: formData,
                    success: function (res) {
                        if (res.status == "ok") {
                            layer.msg("修改成功", {
                                icon: 1, time: 2000, end: function () {
                                    top.layer.close(index);

                                    //刷新父页面
                                    location.reload();
                                }
                            });



                        } else {
                            layer.msg("修改失败:" + res.errorMsg, {
                                icon: 5, time: 2000, end: function () {
                                    top.layer.close(index);
                                }
                            });
                        }
                    },
                    error: function () {
                        layer.msg("网络请求失败", {
                            icon: 5, time: 2000, end: function () {
                                top.layer.close(index);
                                layer.closeAll("iframe");
                                //刷新父页面
                                //location.reload();
                            }
                        });
                    }
                });

                return false;
            })

        })

    </script>
}